<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>系统后台页面</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="flex h-screen">
    <!-- 侧边栏 -->
    <div class="w-64 bg-gray-800 text-white">
        <div class="p-4">
            <h2 class="text-xl font-bold">后台管理</h2>
        </div>
        <nav class="space-y-2">
            <div class="px-4 py-2 text-sm font-medium text-gray-400">管理模块</div>
            <div class="relative group">
                <a href="#" class="flex items-center px-4 py-2 space-x-2 text-gray-300 hover:text-white hover:bg-gray-700">
                    <i class="fa fa-users"></i>
                    <span>用户管理</span>
                    <i class="fa fa-angle-down ml-auto"></i>
                </a>
                <!-- 用户管理子菜单 -->
                <div class="absolute left-full top-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top-left scale-95 group-hover:scale-100">
                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors" onclick="navigateToUserList()">
                        <i class="fa fa-search mr-2"></i>查询用户
                    </a>
                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors" onclick="navigateToAddUser()">
                        <i class="fa fa-plus mr-2"></i>添加用户
                    </a>
                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors" onclick="navigateToUpdateUser()">
                        <i class="fa fa-pencil mr-2"></i>修改用户
                    </a>
                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors" onclick="deleteUser()">
                        <i class="fa fa-trash mr-2"></i>删除用户
                    </a>
                </div>
            </div>
            <div class="relative group">
                <a href="#" class="flex items-center px-4 py-2 space-x-2 text-gray-300 hover:text-white hover:bg-gray-700">
                    <i class="fa fa-gamepad"></i>
                    <span>游戏管理</span>
                    <i class="fa fa-angle-down ml-auto"></i>
                </a>
                <!-- 游戏管理子菜单 -->
                <div class="absolute left-full top-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top-left scale-95 group-hover:scale-100">
                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors" onclick="navigateToGameList()">
                        <i class="fa fa-search mr-2"></i>查询游戏
                    </a>
                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors" onclick="navigateToAddGame()">
                        <i class="fa fa-plus mr-2"></i>添加游戏
                    </a>
                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors" onclick="navigateToUpdateGame()">
                        <i class="fa fa-pencil mr-2"></i>修改游戏
                    </a>
                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors" onclick="deleteGame()">
                        <i class="fa fa-trash mr-2"></i>删除游戏
                    </a>
                </div>
            </div>
            <div class="relative group">
                <a href="#" class="flex items-center px-4 py-2 space-x-2 text-gray-300 hover:text-white hover:bg-gray-700">
                    <i class="fa fa-comments"></i>
                    <span>评论管理</span>
                    <i class="fa fa-angle-down ml-auto"></i>
                </a>
                <!-- 评论管理子菜单 -->
                <div class="absolute left-full top-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top-left scale-95 group-hover:scale-100">
                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors" onclick="navigateToReviewList()">
                        <i class="fa fa-search mr-2"></i>查询评论
                    </a>
                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors" onclick="navigateToAddReview()">
                        <i class="fa fa-plus mr-2"></i>添加评论
                    </a>
                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors" onclick="navigateToUpdateReview()">
                        <i class="fa fa-pencil mr-2"></i>修改评论
                    </a>
                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors" onclick="deleteReview()">
                        <i class="fa fa-trash mr-2"></i>删除评论
                    </a>
                </div>
            </div>
            <div class="relative group">
                <a href="#" class="flex items-center px-4 py-2 space-x-2 text-gray-300 hover:text-white hover:bg-gray-700">
                    <i class="fa fa-shopping-cart"></i>
                    <span>订单管理</span>
                    <i class="fa fa-angle-down ml-auto"></i>
                </a>
                <!-- 订单管理子菜单 -->
                <div class="absolute left-full top-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top-left scale-95 group-hover:scale-100">
                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors" onclick="navigateToOrderList()">
                        <i class="fa fa-search mr-2"></i>查询订单
                    </a>
                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors" onclick="navigateToAddOrder()">
                        <i class="fa fa-plus mr-2"></i>添加订单
                    </a>
                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors" onclick="navigateToUpdateOrder()">
                        <i class="fa fa-pencil mr-2"></i>修改订单
                    </a>
                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors" onclick="deleteOrder()">
                        <i class="fa fa-trash mr-2"></i>删除订单
                    </a>
                </div>
            </div>
        </nav>
    </div>
    <!-- 主内容区域 -->
    <div id="mainContent" class="flex-1 p-4">
        <h1 class="text-2xl font-bold">欢迎来到系统后台</h1>
        <div id="contentPlaceholder">
            <!-- 内容将动态加载到这里 -->
        </div>
    </div>



<script>
    // 导航到用户列表页面
    function navigateToUserList() {
        const contentPlaceholder = document.getElementById('contentPlaceholder');
        contentPlaceholder.innerHTML = `
            <div class="mt-4">
                <h2 class="text-xl font-bold mb-4">用户列表</h2>
                <div class="flex justify-between items-center mb-4">
                    <div class="relative">
                        <input type="text" id="searchInput" placeholder="搜索用户名..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                    <button onclick="navigateToAddUser()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors">
                        <i class="fa fa-plus mr-2"></i>添加用户
                    </button>
                </div>
                <div class="overflow-x-auto">
                    <table id="userTable" class="min-w-full bg-white rounded-lg shadow">
                        <thead>
                            <tr class="bg-gray-100 text-left">
                                <th class="px-4 py-3 rounded-tl-lg">ID</th>
                                <th class="px-4 py-3">用户名</th>
                                <th class="px-4 py-3">邮箱</th>
                                <th class="px-4 py-3">创建时间</th>
                                <th class="px-4 py-3">是否管理员</th>
                                <th class="px-4 py-3 rounded-tr-lg">操作</th>
                            </tr>
                        </thead>
                        <tbody id="userTableBody">
                            <!-- 用户数据将在这里动态加载 -->
                            <tr class="text-center">
                                <td colspan="6" class="px-4 py-8 text-gray-500">加载中...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="mt-4 flex justify-between items-center">
                    <div class="text-sm text-gray-500">
                        共 <span id="totalUsers">0</span> 条记录
                    </div>
                    <div class="flex space-x-2">
                        <button id="prevPage" class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                            上一页
                        </button>
                        <button id="nextPage" class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                            下一页
                        </button>
                    </div>
                </div>
            </div>
        `;

        // 加载用户数据
        loadUsers();

        // 添加搜索功能
        document.getElementById('searchInput').addEventListener('input', function() {
            loadUsers(this.value);
        });
    }

    // 加载用户数据
    function loadUsers(searchTerm = '') {
        const xhr = new XMLHttpRequest();
        let url = '/usermanage/query';
        if (searchTerm) {
            url += `?search=${encodeURIComponent(searchTerm)}`;
        }

        xhr.open('GET', url, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const users = JSON.parse(xhr.responseText);
                const tableBody = document.getElementById('userTableBody');
                tableBody.innerHTML = '';

                if (users.length === 0) {
                    tableBody.innerHTML = `
                        <tr class="text-center">
                            <td colspan="6" class="px-4 py-8 text-gray-500">没有找到用户记录</td>
                        </tr>
                    `;
                } else {
                    users.forEach(user => {
                        const row = tableBody.insertRow();
                        row.className = 'border-b';

                        const idCell = row.insertCell(0);
                        const usernameCell = row.insertCell(1);
                        const emailCell = row.insertCell(2);
                        const createTimeCell = row.insertCell(3);
                        const isAdminCell = row.insertCell(4);
                        const actionCell = row.insertCell(5);

                        idCell.className = 'px-4 py-3';
                        usernameCell.className = 'px-4 py-3';
                        emailCell.className = 'px-4 py-3';
                        createTimeCell.className = 'px-4 py-3';
                        isAdminCell.className = 'px-4 py-3';
                        actionCell.className = 'px-4 py-3';

                        idCell.textContent = user.id;
                        usernameCell.textContent = user.username;
                        emailCell.textContent = user.email;
                        createTimeCell.textContent = user.createTime;
                        isAdminCell.textContent = user.isAdmin === 1 ? '是' : '否';

                        actionCell.innerHTML = `
                            <button onclick="navigateToUpdateUser(${user.id})" class="text-blue-500 hover:text-blue-700 mr-2">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button onclick="confirmDelete(${user.id})" class="text-red-500 hover:text-red-700">
                                <i class="fa fa-trash"></i>
                            </button>
                        `;
                    });
                }

                // 更新用户总数
                document.getElementById('totalUsers').textContent = users.length;

                // 启用/禁用分页按钮
                document.getElementById('prevPage').disabled = true;
                document.getElementById('nextPage').disabled = true;
            }
        };
        xhr.send();
    }

    // 导航到添加用户页面
    function navigateToAddUser() {
        const contentPlaceholder = document.getElementById('contentPlaceholder');
        contentPlaceholder.innerHTML = `
            <div class="mt-4">
                <h2 class="text-xl font-bold mb-4">添加用户</h2>
                <div class="bg-white rounded-lg shadow p-6 max-w-md mx-auto">
                    <form id="addUserForm">
                        <div class="mb-4">
                            <label for="addUsername" class="block text-sm font-medium text-gray-700 mb-1">用户名:</label>
                            <input type="text" id="addUsername" name="username" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div class="mb-4">
                            <label for="addPassword" class="block text-sm font-medium text-gray-700 mb-1">密码:</label>
                            <input type="password" id="addPassword" name="password" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div class="mb-4">
                            <label for="addEmail" class="block text-sm font-medium text-gray-700 mb-1">邮箱:</label>
                            <input type="email" id="addEmail" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div class="mb-4">
                            <label for="addIsAdmin" class="block text-sm font-medium text-gray-700 mb-1">是否管理员:</label>
                            <select id="addIsAdmin" name="isAdmin" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="0">否</option>
                                <option value="1">是</option>
                            </select>
                        </div>
                        <div class="flex justify-end space-x-3">
                            <button type="button" onclick="navigateToUserList()" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                                返回
                            </button>
                            <button type="button" onclick="submitAddUserForm()" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
                                添加
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        `;
    }

    // 提交添加用户表单
    function submitAddUserForm() {
        const username = document.getElementById('addUsername').value.trim();
        const password = document.getElementById('addPassword').value.trim();
        const email = document.getElementById('addEmail').value.trim();

        // 表单验证
        if (!username || !password || !email) {
            alert('请填写所有必填字段');
            return;
        }

        const user = {
            username: username,
            password: password,
            email: email,
            isadmin: parseInt(document.getElementById('addIsAdmin').value)
        };

        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/addUser', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    alert('用户添加成功');
                    navigateToUserList();
                } else {
                    alert('添加用户失败，请重试');
                }
            }
        };
        xhr.send(JSON.stringify(user));
    }

    // 导航到修改用户页面
    function navigateToUpdateUser(userId = null) {
        const contentPlaceholder = document.getElementById('contentPlaceholder');

        if (!userId) {
            // 如果没有提供用户ID，提示用户选择
            userId = prompt('请输入要修改的用户ID');
            if (!userId) return;
        }

        // 显示加载状态
        contentPlaceholder.innerHTML = `
        <div class="mt-4">
            <h2 class="text-xl font-bold mb-4">修改用户</h2>
            <div class="bg-white rounded-lg shadow p-6 max-w-md mx-auto text-center">
                <i class="fa fa-spinner fa-spin text-blue-500 text-3xl mb-4"></i>
                <p class="text-gray-500">正在加载用户信息...</p>
            </div>
        </div>
    `;

        // 获取用户信息
        const xhr = new XMLHttpRequest();
        xhr.open('GET', `/getUser/${userId}`, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    const user = JSON.parse(xhr.responseText);

                    // 显示用户信息表单
                    contentPlaceholder.innerHTML = `
                    <div class="mt-4">
                        <h2 class="text-xl font-bold mb-4">修改用户</h2>
                        <div class="bg-white rounded-lg shadow p-6 max-w-md mx-auto">
                            <form id="updateUserForm">
                                <input type="hidden" id="updateUserId" name="id" value="${user.id}">
                                <div class="mb-4">
                                    <label for="updateUsername" class="block text-sm font-medium text-gray-700 mb-1">用户名:</label>
                                    <input type="text" id="updateUsername" name="username" value="${user.username}" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div class="mb-4">
                                    <label for="updatePassword" class="block text-sm font-medium text-gray-700 mb-1">密码: <span class="text-gray-400">(留空则不修改)</span></label>
                                    <input type="password" id="updatePassword" name="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div class="mb-4">
                                    <label for="updateEmail" class="block text-sm font-medium text-gray-700 mb-1">邮箱:</label>
                                    <input type="email" id="updateEmail" name="email" value="${user.email}" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div class="mb-4">
                                    <label for="updateIsAdmin" class="block text-sm font-medium text-gray-700 mb-1">是否管理员:</label>
                                    <select id="updateIsAdmin" name="isAdmin" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        <option value="0" ${user.isadmin === 0 ? 'selected' : ''}>否</option>
                                        <option value="1" ${user.isadmin === 1 ? 'selected' : ''}>是</option>
                                    </select>
                                </div>
                                <div class="flex justify-end space-x-3">
                                    <button type="button" onclick="navigateToUserList()" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                                        返回
                                    </button>
                                    <button type="button" onclick="submitUpdateUserForm()" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
                                        保存修改
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                `;
                } else {
                    // 加载用户信息失败
                    contentPlaceholder.innerHTML = `
                    <div class="mt-4">
                        <h2 class="text-xl font-bold mb-4">修改用户</h2>
                        <div class="bg-white rounded-lg shadow p-6 max-w-md mx-auto text-center">
                            <i class="fa fa-exclamation-circle text-red-500 text-3xl mb-4"></i>
                            <p class="text-gray-500">加载用户信息失败，请重试</p>
                            <button onclick="navigateToUserList()" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
                                返回用户列表
                            </button>
                        </div>
                    </div>
                `;
                }
            }
        };
        xhr.send();
    }

    // 提交修改用户表单
    function submitUpdateUserForm() {
        const form = document.getElementById('updateUserForm');
        const userId = document.getElementById('updateUserId').value;
        const username = document.getElementById('updateUsername').value.trim();
        const password = document.getElementById('updatePassword').value;
        const email = document.getElementById('updateEmail').value.trim();

        // 表单验证
        if (!username || !email) {
            alert('用户名和邮箱不能为空');
            return;
        }

        const user = {
            id: userId,
            username: username,
            email: email,
            isadmin: parseInt(document.getElementById('updateIsAdmin').value)
        };

        // 如果密码不为空，则添加到请求中
        if (password) {
            user.password = password;
        }

        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/updateUser', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    alert('用户信息修改成功');
                    navigateToUserList();
                } else {
                    alert('修改用户信息失败，请重试');
                }
            }
        };
        xhr.send(JSON.stringify(user));
    }

    function navigateToGameList() {
        // 发送请求到后端查询游戏列表
        fetch('/game/query')
            .then(response => response.text())
            .then(data => {
                // 将查询结果显示在主内容区域
                document.getElementById('contentPlaceholder').innerHTML = data;
            })
            .catch(error => console.error('查询游戏列表出错:', error));
    }
    function deleteGame() {
        // 假设这里通过某种方式获取到要删除的游戏ID，例如通过模态框输入或者列表项的属性
        const gameId = prompt('请输入要删除的游戏ID');
        if (gameId) {
            fetch(`/game-delete/${gameId}`)
                .then(response => {
                    if (response.ok) {
                        alert('游戏删除成功');
                        // 重新加载游戏列表
                        navigateToGameList();
                    } else {
                        alert('游戏删除失败，请重试');
                    }
                })
                .catch(error => {
                    console.error('删除游戏出错:', error);
                    alert('游戏删除失败，请重试');
                });
        }
    }

    function navigateToGameList() {
        // 发送请求到后端查询游戏列表
        fetch('/game/query')
            .then(response => response.text())
            .then(data => {
                // 将查询结果显示在主内容区域
                document.getElementById('contentPlaceholder').innerHTML = data;
            })
            .catch(error => console.error('查询游戏列表出错:', error));
    }

    function navigateToAddGame() {
        const contentPlaceholder = document.getElementById('contentPlaceholder');
        contentPlaceholder.innerHTML = `
           <div class="mt-4">
    <h2 class="text-xl font-bold mb-4">添加游戏</h2>
    <div class="bg-white rounded-lg shadow p-6 max-w-md mx-auto">
        <form id="addGameForm">
            <!-- 游戏名称 -->
            <div class="mb-4">
                <label for="gameName" class="block text-sm font-medium text-gray-700 mb-1">游戏名称:</label>
                <input type="text" id="gameName" name="gameName" required
                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <!-- 游戏价格 -->
            <div class="mb-4">
                <label for="gamePrice" class="block text-sm font-medium text-gray-700 mb-1">游戏价格:</label>
                <input type="number" id="gamePrice" name="gamePrice" required
                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <!-- 游戏库存 -->
            <div class="mb-4">
                <label for="gameStock" class="block text-sm font-medium text-gray-700 mb-1">游戏库存:</label>
                <input type="number" id="gameStock" name="gameStock" required
                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <!-- 游戏描述 -->
            <div class="mb-4">
                <label for="gameDescription" class="block text-sm font-medium text-gray-700 mb-1">游戏描述:</label>
                <textarea id="gameDescription" name="gameDescription" required
                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>
            <!-- 游戏图片链接 -->
            <div class="mb-4">
                <label for="gameImageUrl" class="block text-sm font-medium text-gray-700 mb-1">游戏图片链接:</label>
                <input type="text" id="gameImageUrl" name="gameImageUrl" required
                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <!-- 添加游戏按钮 -->
            <div class="flex justify-end">
                <button type="button" onclick="addGame()" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
                    添加游戏
                </button>
            </div>
        </form>
    </div>
            </div>
        `;
    }

    // 添加游戏函数
    function addGame() {
        const gameName = document.getElementById('gameName').value;
        const gamePrice = document.getElementById('gamePrice').value;
        const gameStock = document.getElementById('gameStock').value;
        const gameDescription = document.getElementById('gameDescription').value;
        const gameImageUrl = document.getElementById('gameImageUrl').value;

        const game = {
            name: gameName,
            price: parseFloat(gamePrice),
            stock: parseInt(gameStock),
            description: gameDescription,
            imageUrl: gameImageUrl
        };

        fetch('/game/add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(game)
        })
            .then(response => {
                if (response.ok) {
                    alert('游戏添加成功');
                    navigateToGameList();
                } else {
                    alert('游戏添加失败，请重试');
                }
            })
            .catch(error => {
                console.error('添加游戏出错:', error);
                alert('游戏添加失败，请重试');
            });
    }


    function navigateToUpdateGame() {
        const contentPlaceholder = document.getElementById('contentPlaceholder');
        contentPlaceholder.innerHTML = `
       <div class="mt-4">
        <h2 class="text-xl font-bold mb-4">修改游戏</h2>
        <div class="bg-white rounded-lg shadow p-6 max-w-md mx-auto">
            <form id="updateGameForm">
                <!-- 游戏 ID -->
                <div class="mb-4">
                    <label for="updateGameId" class="block text-sm font-medium text-gray-700 mb-1">游戏 ID:</label>
                    <input type="number" id="updateGameId" name="updateGameId" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <!-- 游戏名称 -->
                <div class="mb-4">
                    <label for="updateGameName" class="block text-sm font-medium text-gray-700 mb-1">游戏名称:</label>
                    <input type="text" id="updateGameName" name="updateGameName" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <!-- 游戏价格 -->
                <div class="mb-4">
                    <label for="updateGamePrice" class="block text-sm font-medium text-gray-700 mb-1">游戏价格:</label>
                    <input type="number" id="updateGamePrice" name="updateGamePrice" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <!-- 游戏库存 -->
                <div class="mb-4">
                    <label for="updateGameStock" class="block text-sm font-medium text-gray-700 mb-1">游戏库存:</label>
                    <input type="number" id="updateGameStock" name="updateGameStock" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <!-- 游戏描述 -->
                <div class="mb-4">
                    <label for="updateGameDescription" class="block text-sm font-medium text-gray-700 mb-1">游戏描述:</label>
                    <textarea id="updateGameDescription" name="updateGameDescription" required
                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
                <!-- 游戏图片链接 -->
                <div class="mb-4">
                    <label for="updateGameImageUrl" class="block text-sm font-medium text-gray-700 mb-1">游戏图片链接:</label>
                    <input type="text" id="updateGameImageUrl" name="updateGameImageUrl" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <!-- 修改游戏按钮 -->
                <div class="flex justify-end">
                    <button type="button" onclick="updateGame()" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
                        修改游戏
                    </button>
                </div>
            </form>
        </div>
       </div>
    `;
    }

    function updateGame() {
        const gameId = document.getElementById('updateGameId').value;
        const gameName = document.getElementById('updateGameName').value;
        const gamePrice = document.getElementById('updateGamePrice').value;
        const gameStock = document.getElementById('updateGameStock').value;
        const gameDescription = document.getElementById('updateGameDescription').value;
        const gameImageUrl = document.getElementById('updateGameImageUrl').value;

        const game = {
            id: parseInt(gameId),
            name: gameName,
            price: parseFloat(gamePrice),
            stock: parseInt(gameStock),
            description: gameDescription,
            imageUrl: gameImageUrl
        };

        fetch('/game/update', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(game)
        })
            .then(response => {
                if (response.ok) {
                    alert('游戏修改成功');
                    navigateToGameList();
                } else {
                    alert('游戏修改失败，请重试');
                }
            })
            .catch(error => {
                console.error('修改游戏出错:', error);
                alert('游戏修改失败，请重试');
            });
    }


    function navigateToReviewList() {
        // 发送请求到后端查询评论列表
        fetch('/queryAll')
            .then(response => response.json())
            .then(data => {
                // 将查询结果显示在主内容区域
                const contentPlaceholder = document.getElementById('contentPlaceholder');
                let html = `
                <div class="mt-4">
                    <h2 class="text-xl font-bold mb-4">评论列表</h2>
                    <div class="overflow-x-auto">
                        <table id="reviewTable" class="min-w-full bg-white rounded-lg shadow">
                            <thead>
                                <tr class="bg-gray-100 text-left">
                                    <th class="px-4 py-3 rounded-tl-lg">ID</th>
                                    <th class="px-4 py-3">用户 ID</th>
                                    <th class="px-4 py-3">游戏 ID</th>
                                    <th class="px-4 py-3">评分</th>
                                    <th class="px-4 py-3">内容</th>
                                    <th class="px-4 py-3">创建时间</th>
                                    <th class="px-4 py-3 rounded-tr-lg">操作</th>
                                </tr>
                            </thead>
                            <tbody>
            `;

                if (data.length === 0) {
                    html += `
                    <tr class="text-center">
                        <td colspan="7" class="px-4 py-8 text-gray-500">没有找到评论记录</td>
                    </tr>
                `;
                } else {
                    data.forEach(review => {
                        html += `
                        <tr class="border-b">
                            <td class="px-4 py-3">${review.id}</td>
                            <td class="px-4 py-3">${review.userId}</td>
                            <td class="px-4 py-3">${review.gameId}</td>
                            <td class="px-4 py-3">${review.rating}</td>
                            <td class="px-4 py-3">${review.content}</td>
                            <td class="px-4 py-3">${review.createTime}</td>
                            <td class="px-4 py-3">
                                <!-- 后续可以添加修改和删除按钮 -->
                            </td>
                        </tr>
                    `;
                    });
                }

                html += `
                            </tbody>
                        </table>
                    </div>
                </div>
            `;

                contentPlaceholder.innerHTML = html;
            })
            .catch(error => console.error('查询评论列表出错:', error));
    }

    // 导航到添加评论页面
    function navigateToAddReview() {
        const contentPlaceholder = document.getElementById('contentPlaceholder');
        contentPlaceholder.innerHTML = `
        <div class="mt-4">
            <h2 class="text-xl font-bold mb-4">添加评论</h2>
            <div class="bg-white rounded-lg shadow p-6 max-w-md mx-auto">
                <form id="addReviewForm">
                    <div class="mb-4">
                        <label for="addUserId" class="block text-sm font-medium text-gray-700 mb-1">用户ID:</label>
                        <input type="number" id="addUserId" name="userId" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="mb-4">
                        <label for="addGameId" class="block text-sm font-medium text-gray-700 mb-1">游戏ID:</label>
                        <input type="number" id="addGameId" name="gameId" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="mb-4">
                        <label for="addRating" class="block text-sm font-medium text-gray-700 mb-1">评分:</label>
                        <input type="number" id="addRating" name="rating" min="0" max="5" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="mb-4">
                        <label for="addContent" class="block text-sm font-medium text-gray-700 mb-1">评论内容:</label>
                        <textarea id="addContent" name="content" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                    <div class="flex justify-end space-x-3">
                        <button type="button" onclick="navigateToReviewList()" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                            返回
                        </button>
                        <button type="button" onclick="submitAddReviewForm()" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
                            添加
                        </button>
                    </div>
                </form>
            </div>
        </div>
    `;
    }

    // 提交添加评论表单
    function submitAddReviewForm() {
        const userId = document.getElementById('addUserId').value.trim();
        const gameId = document.getElementById('addGameId').value.trim();
        const rating = document.getElementById('addRating').value.trim();
        const content = document.getElementById('addContent').value.trim();

        // 表单验证
        if (!userId || !gameId || !rating || !content) {
            alert('请填写所有必填字段');
            return;
        }

        const review = {
            userId: parseInt(userId),
            gameId: parseInt(gameId),
            rating: parseInt(rating),
            content: content
        };

        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/review/add', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    const response = JSON.parse(xhr.responseText);
                    if (response.success) {
                        alert('评论添加成功');
                        navigateToReviewList();
                    } else {
                        alert(response.message);
                    }
                } else {
                    alert('添加评论失败，请重试');
                }
            }
        };
        xhr.send(JSON.stringify(review));
    }

    // 导航到评论列表页面（需要实现）
    function navigateToReviewList() {
        const contentPlaceholder = document.getElementById('contentPlaceholder');
        contentPlaceholder.innerHTML = `
        <div class="mt-4">
            <h2 class="text-xl font-bold mb-4">评论列表</h2>
            <div class="overflow-x-auto">
                <table id="reviewTable" class="min-w-full bg-white rounded-lg shadow">
                    <thead>
                        <tr class="bg-gray-100 text-left">
                            <th class="px-4 py-3 rounded-tl-lg">ID</th>
                            <th class="px-4 py-3">用户ID</th>
                            <th class="px-4 py-3">游戏ID</th>
                            <th class="px-4 py-3">评分</th>
                            <th class="px-4 py-3">评论内容</th>
                            <th class="px-4 py-3 rounded-tr-lg">操作</th>
                        </tr>
                    </thead>
                    <tbody id="reviewTableBody">
                        <!-- 评论数据将在这里动态加载 -->
                        <tr class="text-center">
                            <td colspan="6" class="px-4 py-8 text-gray-500">加载中...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    `;

        // 加载评论数据（需要实现）
        loadReviews();
    }

    // 加载评论数据（需要实现）
    function loadReviews() {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', '/queryAll', true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const reviews = JSON.parse(xhr.responseText);
                const tableBody = document.getElementById('reviewTableBody');
                tableBody.innerHTML = '';

                if (reviews.length === 0) {
                    tableBody.innerHTML = `
                    <tr class="text-center">
                        <td colspan="6" class="px-4 py-8 text-gray-500">没有找到评论记录</td>
                    </tr>
                `;
                } else {
                    reviews.forEach(review => {
                        const row = tableBody.insertRow();
                        row.className = 'border-b';

                        const idCell = row.insertCell(0);
                        const userIdCell = row.insertCell(1);
                        const gameIdCell = row.insertCell(2);
                        const ratingCell = row.insertCell(3);
                        const contentCell = row.insertCell(4);
                        const actionCell = row.insertCell(5);

                        idCell.className = 'px-4 py-3';
                        userIdCell.className = 'px-4 py-3';
                        gameIdCell.className = 'px-4 py-3';
                        ratingCell.className = 'px-4 py-3';
                        contentCell.className = 'px-4 py-3';
                        actionCell.className = 'px-4 py-3';

                        idCell.textContent = review.id;
                        userIdCell.textContent = review.userId;
                        gameIdCell.textContent = review.gameId;
                        ratingCell.textContent = review.rating;
                        contentCell.textContent = review.content;

                        actionCell.innerHTML = `
                        <button onclick="navigateToUpdateReview(${review.id})" class="text-blue-500 hover:text-blue-700 mr-2">
                            <i class="fa fa-pencil"></i>
                        </button>
                        <button onclick="confirmDeleteReview(${review.id})" class="text-red-500 hover:text-red-700">
                            <i class="fa fa-trash"></i>
                        </button>
                    `;
                    });
                }
            }
        };
        xhr.send();
    }

    // 导航到修改评论页面（需要实现）
    function navigateToUpdateReview(reviewId = null) {
        // 实现逻辑
    }

    // 确认删除评论（需要实现）
    function confirmDeleteReview(reviewId) {
        // 实现逻辑
    }
    // 导航到订单列表页面
    function navigateToOrderList() {
        const contentPlaceholder = document.getElementById('contentPlaceholder');
        contentPlaceholder.innerHTML = `
        <div class="mt-4">
            <h2 class="text-xl font-bold mb-4">订单列表</h2>
            <div class="bg-white rounded-lg shadow p-6 max-w-md mx-auto">
                <table class="w-full table-auto">
                    <thead>
                        <tr>
                            <th class="px-4 py-3">订单 ID</th>
                            <th class="px-4 py-3">用户 ID</th>
                            <th class="px-4 py-3">游戏 ID</th>
                            <th class="px-4 py-3">总价格</th>
                            <th class="px-4 py-3">状态</th>
                            <th class="px-4 py-3">创建时间</th>
                            <th class="px-4 py-3 rounded-tr-lg">操作</th>
                        </tr>
                    </thead>
                    <tbody id="orderTableBody">
                        <!-- 订单数据将在这里动态加载 -->
                        <tr class="text-center">
                            <td colspan="7" class="px-4 py-8 text-gray-500">加载中...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    `;
        // 加载订单数据
        loadOrders();
    }

    // 加载订单数据
    function loadOrders() {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', '/order/getAll', true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const orders = JSON.parse(xhr.responseText);
                const orderTableBody = document.getElementById('orderTableBody');
                orderTableBody.innerHTML = '';
                orders.forEach(function(order) {
                    const row = orderTableBody.insertRow();
                    const idCell = row.insertCell(0);
                    const userIdCell = row.insertCell(1);
                    const gameIdCell = row.insertCell(2);
                    const totalPriceCell = row.insertCell(3);
                    const statusCell = row.insertCell(4);
                    const createTimeCell = row.insertCell(5);
                    const actionCell = row.insertCell(6);

                    idCell.className = 'px-4 py-3';
                    userIdCell.className = 'px-4 py-3';
                    gameIdCell.className = 'px-4 py-3';
                    totalPriceCell.className = 'px-4 py-3';
                    statusCell.className = 'px-4 py-3';
                    createTimeCell.className = 'px-4 py-3';
                    actionCell.className = 'px-4 py-3';

                    idCell.textContent = order.id;
                    userIdCell.textContent = order.userId;
                    gameIdCell.textContent = order.gameId;
                    totalPriceCell.textContent = order.totalPrice;
                    statusCell.textContent = order.status;
                    createTimeCell.textContent = order.createTime;

                    actionCell.innerHTML = `
                    <button onclick="navigateToUpdateOrder(${order.id})" class="text-blue-500 hover:text-blue-700 mr-2">
                        <i class="fa fa-pencil"></i>
                    </button>
                    <button onclick="confirmDeleteOrder(${order.id})" class="text-red-500 hover:text-red-700">
                        <i class="fa fa-trash"></i>
                    </button>
                `;
                });
            }
        };
        xhr.send();
    }

    // 导航到添加订单页面
    function navigateToAddOrder() {
        const contentPlaceholder = document.getElementById('contentPlaceholder');
        contentPlaceholder.innerHTML = `
        <div class="mt-4">
            <h2 class="text-xl font-bold mb-4">添加订单</h2>
            <div class="bg-white rounded-lg shadow p-6 max-w-md mx-auto">
                <form id="addOrderForm">
                    <div class="mb-4">
                        <label for="addUserId" class="block text-sm font-medium text-gray-700 mb-1">用户 ID:</label>
                        <input type="number" id="addUserId" name="userId" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="mb-4">
                        <label for="addGameId" class="block text-sm font-medium text-gray-700 mb-1">游戏 ID:</label>
                        <input type="number" id="addGameId" name="gameId" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="mb-4">
                        <label for="addTotalPrice" class="block text-sm font-medium text-gray-700 mb-1">总价格:</label>
                        <input type="number" id="addTotalPrice" name="totalPrice" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="flex justify-end space-x-3">
                        <button type="button" onclick="navigateToOrderList()" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                            返回
                        </button>
                        <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
                            添加
                        </button>
                    </div>
                </form>
            </div>
        </div>
    `;
        const addOrderForm = document.getElementById('addOrderForm');
        addOrderForm.addEventListener('submit', function(event) {
            event.preventDefault();
            const userId = document.getElementById('addUserId').value;
            const gameId = document.getElementById('addGameId').value;
            const totalPrice = document.getElementById('addTotalPrice').value;
            const order = {
                userId: userId,
                gameId: gameId,
                totalPrice: totalPrice
            };
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/order/create', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    alert('订单添加成功！');
                    navigateToOrderList();
                }
            };
            xhr.send(JSON.stringify(order));
        });
    }

    // 导航到修改订单页面
    function navigateToUpdateOrder(orderId) {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', `/order/getById/${orderId}`, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const order = JSON.parse(xhr.responseText);
                const contentPlaceholder = document.getElementById('contentPlaceholder');
                contentPlaceholder.innerHTML = `
                <div class="mt-4">
                    <h2 class="text-xl font-bold mb-4">修改订单</h2>
                    <div class="bg-white rounded-lg shadow p-6 max-w-md mx-auto">
                        <form id="updateOrderForm">
                            <input type="hidden" id="updateOrderId" name="id" value="${order.id}">
                            <div class="mb-4">
                                <label for="updateUserId" class="block text-sm font-medium text-gray-700 mb-1">用户 ID:</label>
                                <input type="number" id="updateUserId" name="userId" value="${order.userId}" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div class="mb-4">
                                <label for="updateGameId" class="block text-sm font-medium text-gray-700 mb-1">游戏 ID:</label>
                                <input type="number" id="updateGameId" name="gameId" value="${order.gameId}" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div class="mb-4">
                                <label for="updateTotalPrice" class="block text-sm font-medium text-gray-700 mb-1">总价格:</label>
                                <input type="number" id="updateTotalPrice" name="totalPrice" value="${order.totalPrice}" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div class="flex justify-end space-x-3">
                                <button type="button" onclick="navigateToOrderList()" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                                    返回
                                </button>
                                <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
                                    修改
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            `;
                const updateOrderForm = document.getElementById('updateOrderForm');
                updateOrderForm.addEventListener('submit', function(event) {
                    event.preventDefault();
                    const id = document.getElementById('updateOrderId').value;
                    const userId = document.getElementById('updateUserId').value;
                    const gameId = document.getElementById('updateGameId').value;
                    const totalPrice = document.getElementById('updateTotalPrice').value;
                    const order = {
                        id: id,
                        userId: userId,
                        gameId: gameId,
                        totalPrice: totalPrice
                    };
                    const xhr = new XMLHttpRequest();
                    xhr.open('PUT', '/order/update', true);
                    xhr.setRequestHeader('Content-Type', 'application/json');
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            alert('订单修改成功！');
                            navigateToOrderList();
                        }
                    };
                    xhr.send(JSON.stringify(order));
                });
            }
        };
        xhr.send();
    }

    // 确认删除订单
    function confirmDeleteOrder(orderId) {
        if (confirm('确定要删除该订单吗？')) {
            const xhr = new XMLHttpRequest();
            xhr.open('DELETE', `/order/delete/${orderId}`, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    alert('订单删除成功！');
                    navigateToOrderList();
                }
            };
            xhr.send();
        }
    }




</script>
</body>
</html>